<template>
	<view class="page">
		<view class="status" v-if="data.State==0">暂无轨迹信息</view>
		<view class="status" v-else-if="data.State==1">已揽收</view>
		<view class="status" v-else-if="data.State==2">在途中</view>
		<view class="status" v-else-if="data.State==3">已签收</view>
		<view class="status" v-else-if="data.State==4">问题件</view>
		<view class="status" v-else-if="data.State==5">转寄</view>
		<view class="status" v-else-if="data.State==6">清关</view>
		<view class="box">
			<view class="boxHeader">
				<view class="iconRound">
					<view class="iconfont icon-wuliukuaidi"></view>
				</view>
				<view class="name">{{data.name}}</view>
				<view class="number">{{data.LogisticCode}}</view>
				<view class="copy" @click="copy(data.LogisticCode)">复制</view>
				<!-- <view class="iconRound">
					<view class="iconfont icon-dianhua"></view>
				</view> -->
			</view>
			<!-- 快递信息步骤 -->


			<view class="addressBox">
				<view class="iconfont icon-shouhuodizhi shouhuoIcon"></view>
				<view class="myAddress">收货地址：{{userAddress}}</view>
			</view>
			<view class="stepBox">
				<div class="stepItem" v-for="(item,index) in data.Traces" :key="index">
					<view class="stepIconBox">
						<!-- <view class="iconfont icon-cangku stepIcon" v-if="item.name=='仓库处理中'"></view>
						<view class="iconfont icon-xiadan stepIcon" v-else="item.name='已下单'"></view>
						<view class="iconfont icon-yunshuzhongwuliu-xianxing stepIcon" v-else="item.name='已下单'"></view>
						<view class="iconfont icon-kuaidiyuan_o stepIcon" v-else="item.name='运输中' || '派送中'"></view>
						<view class="iconfont icon-icon_right stepIcon" v-else="item.name='已签收'"></view> -->
					</view>

					<div class="info">
						<!-- <view class="title">{{item.name}}</view> -->
						<!-- 这里还可以循环 -->
						<view class="infoItem">
							<view class="content">
								<!-- 已下单 -->
								{{item.AcceptStation}}
							</view>
							<view class="time">{{item.AcceptTime}}</view>
						</view>
					</div>
				</div>
			</view>

		</view>

	</view>
</template>

<script>
	import CompanyList from '@/common/js/courierServicesCompany.js' //引入快递公司编码表
	export default {
		data() {
			return {
				userAddress:'',
				orderId:'',
				data: {}
			};
		},
		onLoad(e) {
			this.userAddress=e.userAddress
			this.orderId=e.id
		},
		onShow(){
			this.getData()
		},
		methods: {
			copy(value) {
				uni.setClipboardData({
					data: value,
					success: function() {
						//调用方法成功
						uni.showToast({
							title: "复制成功",
						})
					}
				})
			},
			// 通过编号 获取快递公司名称
			getName(){
				CompanyList.forEach((item)=>{
					if(this.data.ShipperCode==item.serialNumber){
						this.data.name=item.name
						console.log(this.data.name)
						return
					}
				})
			},
			async getData(){
				
				// /pay/order/logistics
				let params={
					id:this.orderId
				}
				let res=await this.$api.request('pay/order/logistics','get',params)
				console.log(res,'触发了吗')
				this.data=res.data
				this.getName()
				
			}
			
			



		}
	};
</script>

<style>
	/* #ifndef H5 */
	page {
		height: 100%;
		/* background-color: #f2f2f2; */
	}

	/* #endif */
</style>

<style lang="scss" scoped>
	.page {
		padding: 8rpx 20rpx;
		width: 100%;
		box-sizing: border-box;
	}

	.status {
		font-size: 34rpx;
		font-weight: 600;
		color: #212529;
		margin-bottom: 15rpx;
	}

	.iconRound {
		height: 50rpx;
		width: 50rpx;
		background-color: #e9ecef;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
	}

	.addressBox {
		display: flex;
		align-items: center;
		padding: 15rpx;


		.shouhuoIcon {
			font-size: 30rpx;
			margin-right: 8rpx;
		}

		.myAddress {
			width: calc(100% - 35rpx);
			font-size: 24rpx;
			color: #6c757d;
		}
	}

	.stepBox {
		display: flex;
		flex-direction: column;
		overflow: hidden;

		.stepItem {
			display: flex;
			font-size: 24rpx;
			color: #6c757d;
			position: relative;

			&::after {
				content: ' ';
				width: 2rpx;
				position: absolute;
				height: 100%;
				left: 11.5rpx;
				top: 25rpx;
				background-color: #eee;
			}

		}

		.info {
			width: calc(100% - 40rpx);
			display: flex;
			flex-direction: column;

			.title {
				font-size: 28rpx;
				font-weight: bold;
				color: #212529;
				margin-bottom: 10rpx;
			}

			.time {
				font-size: 24rpx;
				color: #999;
				margin-bottom: 15rpx;
			}

			.content {
				font-size: 24rpx;
				color: #212529;
				margin-bottom: 10rpx;
			}
		}

		.stepIconBox {
			height: 25rpx;
			width: 25rpx;
			background-color: #e9ecef;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 8rpx;
			position: relative;
			z-index: 100;


			.stepIcon {
				font-size: 24rpx;
			}
		}
	}

	.box {
		background-color: #fff;
		width: 100%;
		padding: 15rpx;
		border-radius: 15rpx;
		box-sizing: border-box;

		.boxHeader {
			display: flex;
			width: 100%;
			box-sizing: border-box;
			padding: 15rpx 10rpx;
			align-items: center;

			.icon-wuliukuaidi {
				font-size: 26rpx;
				color: #6c757d;

			}

			.name {
				font-size: 32rpx;
				color: #212529;
				font-weight: 600;
				margin-left: 10rpx;
			}

			.number {
				font-size: 32rpx;
				color: #212529;
				margin-left: 10rpx;
			}

			.copy {
				border-radius: 100rpx;
				width: 80rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				color: #212529;
				background-color: #eee;
				margin-left: auto;
				font-size: 24rpx;
				margin-right: 10rpx;
			}

			.icon-dianhua {
				font-size: 30rpx;
				color: #212529;
			}
		}
	}
</style>